<template>
  <el-tabs tab-position="left" v-model="activeName" class="demo-tabs mb-11">
    <el-tab-pane
      class="p-8"
      :label="$t('pagePower.buttons.button1')"
      name="first"
    >
      <power-chart1 :power-consumption-value="+powerConsumptionValue" />
    </el-tab-pane>
    <el-tab-pane
      class="p-8"
      :label="$t('pagePower.buttons.button2')"
      name="second"
    >
      <power-chart2 :power-consumption-value="+powerConsumptionValue" />
    </el-tab-pane>
  </el-tabs>
  <power-tabs :power-consumption-value="+powerConsumptionValue" />
</template>
<script lang="ts" setup>
import emitter from '@/utilities/emitter';
import { usePowerControlStore } from '@/store/SystemManagement/Power/PowerControlStore';
import PowerChart1 from './PowerChart1.vue';
import PowerChart2 from './PowerChart2.vue';
import PowerTabs from './PowerTabs.vue';

const powerControlStore = usePowerControlStore();

await powerControlStore.getPowerChassisId();

await powerControlStore.getPowerControl().catch((err: string) => {
  ElMessage({
    showClose: true,
    message: err,
    type: 'error',
  });
});
powerControlStore.getReadingRangeMax().then(() => {
  emitter.emit('getRealTimeData-complete');
});
powerControlStore.getHistoryInfo().then(() => {
  emitter.emit('getHistoryInfo-complete');
});
powerControlStore.getPowerControl();

const activeName = ref('first');

const powerConsumptionValue = computed(
  () => powerControlStore.powerConsumptionValue,
);
</script>
